<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5播放器</title>
<link href="jquery-ui-1.8.9.custom/css/vader/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css" />
</head>

<style type="text/css">
body {
	background-color: #000;
	font-size:12px;
	color:#FFF;
}
#video_resize {
	 width:auto;
	 height:auto;
	 position:relative;
}
#caption {
  position: absolute;
  width: 100%;
  bottom:7%; /* 留出空间给控制条 */
  left: 0;
  text-align: center;
}
</style>

<body>
<table width="600" border="0" align="center">
  <tr>
    <td align="center" valign="middle">
    <div id="video_resize"><!--CSS用来让字幕保持在画面下方，id根据video.js用jquery提供尺寸修改功能-->
      <video
 id="video"
 controls="controls"
 src="demos/Spirited.Away.ogv"
 preload="auto"
 >
<!--
高度应预留足够文本显示比如在原始高度上+100
注意黑边是上下同时有，也就是说视频是默认居中的，字幕位置应根据这点做好预算
-->
<!--不支持HTML5时显示-->
<div class="ui-widget">
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
<strong>警告:</strong>您的浏览器不支持HTML5 VIDEO。</p>
</div>
</div>
<!--不支持HTML5时显示-->
</video>

<div id="caption"><!--这句用来让字幕保持在控制条上方-->
<style type="text/css" id="subtitle_css"></style><!--字幕用CSS预留空间-->
<div id="subtitle_place"></div>
</div>
</div>
</td>
  </tr>
  <tr>
    <td align="center" valign="middle">
    <div id="audio_place">
    <audio
 id="audio"
 src="demos/Spirited.Away.cantonges.oga"
 >
</audio>
</div>
</td>
  </tr>
  <tr>
    <td align="center" valign="middle" id="state">&nbsp;</td>
  </tr>
  <tr>
    <td align="center" valign="middle">
<div id="tabs" style="width:600">
	<ul style="size:0.3">
		<li><a href="#tabs-1">流设置</a></li>
		<li><a href="#tabs-2">字幕样式表</a></li>
        <li><a href="#tabs-3" onclick="show_sync_time()">同步设置</a></li>
		<li><a href="#tabs-4" >实时媒体信息</a></li>
	</ul>
	<div id="tabs-1">
    <select name="select" id="lect" onchange="change_audio(this.value)">
      <option value="demos/Spirited.Away.cantonges.aac">粤语</option>
      <option value="demos/Spirited.Away.putonghua.aac">普通话</option>
    </select>
      <select name="select2" id="subtitle_list" onchange="request_subtitle(this.value)">
      <option selected="selected">无</option>
        <option value="demos/Spirited.Away.US.ass">ENGLISH</option>
        <option value="demos/Spirited.Away.CN-zh.ass">中文简体</option>
        <option value="demos/Spirited.Away.RU.ass">русский язык</option>
        <option value="demos/Spirited.Away.KR.ass">한국어</option>
        <option value="demos/Spirited.Away.JP.ass">にほんご</option>
        
    </select><!--非常重要：字幕请使用UTF8编码！！-->
	</div>
	<div id="tabs-2">
    未选择字幕。
	</div>
   	<div id="tabs-3">   
	</div>
	<div id="tabs-4">
    开启实时媒体信息会拖慢浏览器响应速度。<button type="button" id="debug_button" onclick="debug_mode()">开启</button>
<table width="600" border="0" align="center" >
  <tr>
    <td colspan="2" align="center" id="d1" >&nbsp;</td>
  </tr>
  <tr>
    <td align="center" id="d2" >&nbsp;</td>
    <td align="center" id="d3">&nbsp;</td>
  </tr>
</table>
	</div>
</div>    
   </td>
  </tr>
</table>
</body>
</html>
<script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="pre_setting.js"></script>
<script type="text/javascript" src="audio.js"></script>
<script type="text/javascript" src="subtitle.js"></script>
<script type="text/javascript" src="debug.js"></script>
<script type="text/javascript" src="video.js"></script>
<script type="text/javascript" src="everythingelse.js"></script>
